
<template>
  <view class="activity">
    <view class="img">
      <image mode="widthFix" :src="imgTop" />
    </view>
    <view
      :class="company_id === 'gzjl' || company_id === 'gzad' || company_id === 'gzdd' ? 'container' : 'container container-no'">
      <view class="container-box">
        <form @submit="formSubmit" @reset="formReset">
          <view class="section_content">
            <view class="section_title">*客户姓名</view>
            <input name="name" class="width320" maxlength="12" confirm-type="确定" placeholder="姓名"
              :value="name" />
          </view>
          <view class="section_content2">
            <picker mode="date" name="applyDate" class="pickers" @change="bindDateChange" start="2020-01-01"
              :value="currentDateStart" end="2025-01-01">
              <view class="section_title2">*交车日期</view>
              <view class="picker_text picker_text2_0908">
                <view class="bottom">></view>
                <text :class="dateText == '请选择日期' ? 'b' : 'a'">{{ dateText }}</text>
              </view>
            </picker>
          </view>
          <view class="section_content2">
            <picker mode="time" name="applyTime" class="pickers" @change="bindTimeChange" start="09:00" end="21:00"
              :value="currentTime">
              <view class="section_title2">*交车时间</view>
              <view class="picker_text picker_text2_0908">
                <view class="bottom">></view>
                <text :class="timeText == '请选择时间' ? 'b' : 'a'">{{ timeText }}</text>
              </view>
            </picker>
          </view>
          <view class="section_content">
            <view class="section_title">*车型</view>
            <input name="car" class="width320" maxlength="12" confirm-type="确定" placeholder="车型"
              :value="name" />
          </view>
          <view class="section_btn">
            <button form-type="submit" class="btn_ok">生成交车函</button>
          </view>
        </form>
      </view>

      <view class="container-box">
        <view class="h2">{{ company_id }} 文件准备 自定义</view>
        <form @submit="formSubmitSetup">
          <view class="section_content3" v-for="(item, index) in setupList" :key="index" v-if="item.text !== null">
            <view class="section_title">{{ item.title }}</view>
            <textarea :name="item.name" :value="item.text" :style="{ height: item.autoHeight ? 'auto' : '70px' }"
              @change="bindHeightChange(index)" :disable-default-padding="true" :auto-height="item.autoHeight"
              placeholder=" " />
          </view>
          <view class="section_btn">
            <button form-type="submit" class="btn_ok btn_ok_black">保存自定义</button>
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
import { postUpdateShare, postDetailsShare } from '@/API/invite'

export default {
  data() {
    return {
      detailsShareObj: {},
      setupList: [
        {
          title: '您属于公司金融分期客户，请准备一下材料：',
          autoHeight: false,
          text: '',
          name: 'company_materials'
        },
        {
          title: '二手车置换准备材料：',
          autoHeight: false,
          text: '',
          name: 'substitution_materials'
        },
        {
          title: '大用户准备材料：',
          autoHeight: false,
          text: '',
          name: 'user_materials'
        },
        {
          title: '其他准备材料：',
          autoHeight: false,
          text: '',
          name: 'other_materials'
        }
      ],
      currentDateStart: '',
      // // 活动专场时间
      // activityListDate: ['7'],
      // activityList: [
      // 	['2022', '2023', '2024'], [1,2,3,4,5,6,7,8,9,10,11,12],
      // ],
      // activityIndex: [0, 0],
      // activityTime: '', //参加日期
      autoHeight: false,
      dateText: '请选择日期',
      timeText: '请选择时间',
      timeList: [
        '09',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21'
      ],
      timeIndex: 0,
      currentTime: '09:00',
      company_id: '',
      imgTop: ''
    }
  },

  async onLoad(obj) {
    console.log('obj', obj.company);
    if (obj.company === undefined) {
      this.company_id = 'gzjl';
    } else {
      this.company_id = obj.company;
    }

    this.imgTop = `https://www.kamlung.net/images/audi/activity/${this.company_id}_20220613.jpg`
    uni.showLoading({
      title: 'Loading'
    });
    const { data } = await postDetailsShare({ company_id: this.company_id });
    this.detailsShareObj = data;
    this.setupList[0].text = data.result[0].company_materials;
    this.setupList[1].text = data.result[0].substitution_materials;
    this.setupList[2].text = data.result[0].user_materials;
    this.setupList[3].text = data.result[0].other_materials;
    if (data.code === 200) {
      uni.hideLoading();
      console.log('data', data.result[0]);
    }
  },
  onShow() {
    let n = 1;
    let newday = new Date().getTime() - n * 24 * 60 * 60 * 1000;
    this.currentDateStart = new Date(newday)
      .toLocaleDateString()
      .replace(/\//g, '-');
  },
  methods: {
    bindDateChange(e) {
      this.dateText = e.detail.value;
    },
    //选择日期时间段
    bindTimeChange(e) {
      this.timeText = e.detail.value;
      this.currentTime = e.detail.value;
      // this.timeIndex = e.detail.value
      // this.timeText = that.timeList[e.detail.value]
      // let that = this
      // that.activityIndex = [e.detail.value[0], e.detail.value[1]]
      // that.activityText = that.activityList[0][e.detail.value[0]] + '-' + that.activityList[1][e.detail.value[1]]
      // that.activityTime = that.activityList[1][e.detail.value[1]]
    },
    bindHeightChange(e) {
      if (
        e.detail.height >= 64 &&
        this.setupList[e.target.dataset.wpybindheightchangeA].autoHeight === false
      ) {
        this.setupList[e.target.dataset.wpybindheightchangeA].autoHeight = true;
      } else {
        this.setupList[e.target.dataset.wpybindheightchangeA].autoHeight = false;
      }
    },
    formSubmit(e) {
      let formData = e.detail.value;
      console.log('formData1', formData)
      let title_name = '温馨提示：\n请填写姓名！';
      let title_date = '温馨提示：\n请选择交车日期！';
      let title_time = '温馨提示：\n请选择交车时间！';
      let title_car = '温馨提示：\n请填写车型！';
      let Tips = function (value) {
        uni.showToast({
          title: value,
          icon: 'none',
          duration: 1500
        });
      };
      if (formData.name.length == 0) {
        Tips(title_name);
      } else if (formData.applyDate.length == 0) {
        Tips(title_date);
      } else if (
        formData.applyTime.length == 0 ||
        this.timeText === '请选择时间'
      ) {
        Tips(title_time);
      } else if (formData.car.length == 0) {
        Tips(title_car);
      } else {
        let arrData = formData.applyDate.split('-');
        let arrTime = formData.applyTime.split(':');

        uni.setStorageSync('name', formData.name);
        uni.setStorageSync('applyDate', arrData);
        uni.setStorageSync('applyTime', arrTime);
        uni.setStorageSync('applyCar', formData.car);
        uni.setStorageSync('company_id', this.company_id);
        uni.setStorageSync('detailsShareObj', this.detailsShareObj.result[0]);

        uni.navigateTo({
          url: '/pages/activity/share'
        });
      }
    },
    async formSubmitSetup(e) {
      let formData = e.detail.value;
      console.log('formData2', formData);
      this.detailsShareObj = formData;
      formData.company_id = this.company_id;
      const { data } = await postUpdateShare(formData);
      if (data.code === 200) {
        uni.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 1500
        });
      }
    }
  }
}
</script>

<style lang="scss">
.section_content,
.section_content2,
.section_content3,
input {
  box-sizing: content-box;
}

.activity {
  font-size: 28rpx;
  color: #323232;

  image {
    width: 100%;
    display: flex;
  }

  form {
    display: block;
    overflow-y: scroll;
    // background: #fff;
    width: 80%;
    margin: 0 auto 20rpx;
  }

  .container {
    background-image: url(https://www.kamlung.net/images/audi/activity/gzjl_20220613_02.jpg);
    background-repeat: no-repeat;
    background-size: contain;
  }

  .container-no {
    background: #fff !important;
  }

  .container-box {
    padding: 50rpx 0 20rpx;
  }

  .section_content2 {
    height: 70rpx;
    // background: #ffffff;
    // border-top: 1rpx solid #bbbbbb;
    border-bottom: 1rpx solid #bbbbbb;
    padding: 16rpx 0 8rpx 0;

    // margin-top: -1rpx;
    .section_title,
    .section_title2 {
      width: 122rpx;
      height: 66rpx;
      line-height: 60rpx;
      padding-left: 108rpx;
      margin-bottom: 0;
      float: left;
    }

    .section_title2 {
      width: 220rpx;
      padding-left: 0;
      position: absolute;
    }

    .section_title_2z {
      //2个文字
      width: 124rpx;
      padding-left: 112rpx;
    }

    .section_title_3z {
      //3个文字
      width: 144rpx;
      padding-left: 88rpx;
    }

    .section_title_4z {
      //4个文字
      width: 170rpx;
      padding-left: 62rpx;
    }

    .section_title_6z {
      //4个文字
      width: 228rpx;
      padding-left: 4rpx;
    }

    .radio-group {
      text-align: center;
      margin-bottom: 10rpx;

      label {
        margin: 0 30rpx;
      }
    }

    textarea {
      width: 700rpx;
      height: 240rpx;
      padding: 0 20rpx;
      display: block;
      position: relative;
    }

    .pickers {
      height: 66rpx;
      line-height: 60rpx;

      .picker_text2_0908 {
        padding-left: 228rpx;
      }

      .picker_text,
      .picker_text2 {
        height: 66rpx;
        float: left;

        text {
          float: left;
          width: 260rpx;
          overflow: hidden; //超出一行文字自动隐藏
          text-overflow: ellipsis; //文字隐藏后添加省略号
          white-space: nowrap; //强制不换行
          color: #848484;

          &.red {
            color: #df002b;
          }

          &.black {
            color: #323232;
          }

          &.a {
            color: #323232;
          }

          &.b {
            color: #848484;
          }
        }
      }

      // .picker_text2 {
      //   text {
      //     width: 200rpx;
      //   }
      // }
    }
  }

  .section_content,
  .section_content2 {
    position: relative;

    .add,
    .binding {
      position: absolute;
      top: 15rpx;
      right: 43rpx;
      width: 54rpx;
      height: 54rpx;
      line-height: 56rpx;
      text-align: center;
      color: #666;
      border: 2rpx solid #999999;
      // background: #ffffff;
      border-radius: 900rpx;
      z-index: 999;
      font-size: 54rpx;
    }

    .binding {
      width: 60rpx;
      height: 60rpx;
      border: none;
      display: inline-block;
      padding: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .bottom {
      position: absolute;
      top: 17rpx;
      right: 43rpx;
      width: 54rpx;
      height: 54rpx;
      line-height: 55rpx;
      text-align: center;
      color: #999999;
      z-index: 999;
      font-size: 44rpx;
      transform: rotate(90deg) scaleY(1.6);
    }
  }

  .section_content {
    // background: #ffffff;
    // border-top: 1rpx solid #bbbbbb;
    border-bottom: 1rpx solid #bbbbbb;

    // margin-top: -1rpx;
    .section_title {
      width: 186rpx;
      text-align: left;
      position: absolute;
      top: 24rpx;
      left: 0rpx;
      z-index: 99;
      margin-bottom: 10rpx;
    }

    input,
    .radio-group {
      width: 320rpx;
      height: 70rpx;
      // background: #ffffff;
      padding: 11rpx 11rpx 11rpx 230rpx;

      &.width320 {
        width: 320rpx;
      }

      &.width400 {
        width: 400rpx;
      }
    }

    .radio-group {
      height: 58rpx;
      padding-top: 22rpx;

      label {
        margin-right: 18rpx;
      }
    }

    .pickers {
      height: 70rpx;
      font-size: 30rpx;
      padding: 11rpx 11rpx 11rpx 200rpx;

      .picker_text {
        height: 70rpx;
        line-height: 66rpx;
        color: #df002b;

        text {
          float: left;
          margin-left: 80rpx;
        }
      }
    }
  }

  .h2 {
    margin-top: 80rpx 0 20rpx;
    font-size: 36rpx;
    font-weight: 600;
    text-align: center;
  }

  .section_content3 {
    position: relative;
    width: 100%;

    .section_title {
      position: initial;
      margin: 20rpx 0 10rpx;
      width: 100%;
    }

    textarea {
      box-sizing: border-box;
      padding: 10rpx;
      border: 1rpx solid #bbbbbb;
      height: 64px;
    }
  }
  .section_btn {
    width: 100%;
    margin: 40rpx 0;
    .btn_ok {
      width: 80%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      text-align: center;
      letter-spacing: 2rpx;
      margin: 0 auto;
      border-radius: 0;
      // border-top: 1px solid #E8E8EA;
      color: #fff;
      // background: #222;
      background: rgba(177, 36, 53, 1);
      // background-image: linear-gradient(#e0c9b9, #805f45);
      // background: #3d2727;
      // background: #805f45;
      // background: #dda238;
    }
    .btn_ok_black {
      background: #333;
      color: #fff;
    }
    .btn_black {
      margin-top: 30rpx;
      font-size: 26rpx;
      text-align: center;
      width: 100%;
      height: 46rpx;
      line-height: 46rpx;
      color: #333;
      text-decoration: underline;
    }
  }
}
</style>